---
type Props = {
	title: string;
};

const { title } = Astro.props as Props;
---

<section class="py-10 grid grid-cols-[1fr_2fr] h-[20rem] overflow-hidden relative">
	<div class="absolute inset-0 bg-gradient-to-t from-slate-50 to-transparent z-10 bg-clip-content">
		<button
			class="block absolute bottom-4 left-1/2 -translate-x-1/2 text-base font-medium font-sans p-4 rounded-md hover:bg-slate-100 transition-colors"
		>
			See More
		</button>
	</div>
	<h1 class="text-2xl text-slate-800 font-heading uppercase justify-self-start m-0">{title}</h1>
	<div>
		<slot />
	</div>
</section>
